<template>
    <!-- 
      v-for使用用法细节强调:
      1、使用v-for只需定义一个结构即可
      2、使用时，需要注明，谁为键，即可以使用vue所提供的绑定事件所用指令，即v-bind:prototype='data model'或简写为  :prototype='data model'


      这里用一个v-for实现url,href,以及names的绑定
     -->
    <div class="outer">
        <a v-for="(url,index) in urls" :key="url" :href="detailInfo[index]" target="_blank">
            <div class="inner">
                <img :src="url" alt="">
                <div class="box">{{ names[index] }}</div>
            </div>
        </a>
    </div>
</template>


<script>
import { nextTick } from 'vue';
export default {
    data() {
        return {
            urls: [],
            names:[],
            detailInfo:[]
        }
    },
    methods: {
        myFun: function () {

        }
    },
    mounted() {
        this.$axios.get('http://localhost:520/allImg').then(
            (res) => {
                this.urls = res.data.data[0]
                this.names=res.data.data[1]
                this.detailInfo=res.data.data[2]
                /*
                这里渲染中牵扯一个小技巧，什么小技巧呐？
                由于页面中的元素还并未被完全渲染，此时去绑定相关的事件是会出问题的，因为元素并没有存在，所以就找不到，于是绑定就失败了(这就是问题) 
                解决办法:
                1、需要在成功回调函数中then中，不能直接加相关的事件绑定代码，而是要在里面套一层，nexTick()这样一个方法，里面再传一个回调函数，这里面就可以使用你所写的事件绑定函数
                */
                nextTick(() => {
                    var inners = document.getElementsByClassName('inner')
                    var imgs = document.getElementsByTagName('img')
                    var boxs = document.getElementsByClassName('box')
                    for (let i = 0; i < inners.length; i++) {
                        inners[i].addEventListener('mouseenter', () => {
                            imgs[i].style.transform = 'scale(1.2)'
                            boxs[i].style.transform = 'scale(1.2)'
                            boxs[i].style.opacity = '0.7'
                        })
                        inners[i].addEventListener('mouseout', () => {
                            imgs[i].style.transform = 'scale(1)'
                            boxs[i].style.transform = 'scale(1)'
                            boxs[i].style.opacity = '0'
                        })
                    }

                })
            }
        )
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body{
    background-image: linear-gradient(30deg,red,green,yellow);
}
.outer {
    width: 500px;
    display: flex;
    /* background-image: linear-gradient(30deg,red,green,yellow); */
    margin: 50px auto;
    flex-wrap: wrap;
    position: relative;
}

img {
    /* 图像会根据设置的宽度进行等比缩放 */
    width: 100px;
    flex-grow: 1;
    transition: 0.5s all linear;
    /*  */
    display: block;
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    color: white;
    font-size: 22px;
    background: black;
    opacity: 0;
    line-height: 100px;
    transition: 0.5s all linear;
    text-align: center;
    top: 0;
}

.inner {
    position: relative;
}
</style>